<template>
  <div class="google-login-container">
    <!-- 标准Google登录按钮 -->
    <button
      v-if="!useOneTap"
      @click="handleGoogleLogin"
      :disabled="isLoading"
      class="google-login-btn"
      type="button"
    >
      <div class="google-icon">
        <svg viewBox="0 0 24 24" width="18" height="18">
          <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
          <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
          <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
          <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
        </svg>
      </div>
      <span class="google-text">
        {{ isLoading ? 'Signing in...' : 'Sign in with Google' }}
      </span>
    </button>

    <!-- Google One Tap 容器 -->
    <div
      v-if="useOneTap"
      ref="oneTapContainer"
      class="google-one-tap-container"
    ></div>

    <!-- 错误提示 -->
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { GoogleAuthUtils } from '../utils/googleAuth'
import { trpc } from '../utils/trpc'
import { useToast } from 'vue-toastification'

// Props
interface Props {
  useOneTap?: boolean
  onSuccess?: (result: any) => void
  onError?: (error: string) => void
}

const props = withDefaults(defineProps<Props>(), {
  useOneTap: false
})

// Emits
const emit = defineEmits<{
  success: [result: any]
  error: [error: string]
}>()

// 响应式数据
const isLoading = ref(false)
const error = ref('')
const oneTapContainer = ref<HTMLElement>()
const toast = useToast()

// 处理Google登录
async function handleGoogleLogin() {
  if (!GoogleAuthUtils.isConfigured()) {
    const errorMsg = 'Google OAuth not configured'
    error.value = errorMsg
    emit('error', errorMsg)
    props.onError?.(errorMsg)
    toast.error(errorMsg)
    return
  }

  isLoading.value = true
  error.value = ''

  try {
    if (props.useOneTap) {
      // 使用Google One Tap
      const idToken = await GoogleAuthUtils.signInWithGoogle()
      await authenticateWithGoogle(idToken)
    } else {
      // 使用弹窗方式
      const code = await GoogleAuthUtils.openAuthPopup()
      await authenticateWithGoogleCode(code)
    }
  } catch (err) {
    const errorMsg = err instanceof Error ? err.message : 'Google authentication failed'
    error.value = errorMsg
    emit('error', errorMsg)
    props.onError?.(errorMsg)
    toast.error(errorMsg)
  } finally {
    isLoading.value = false
  }
}

// 使用ID Token进行认证
async function authenticateWithGoogle(idToken: string) {
  try {
    const result = await trpc.auth.googleAuth.mutate({
      googleToken: idToken
    })

    if (result.success && result.data) {
      emit('success', result.data)
      props.onSuccess?.(result.data)
      toast.success(result.message || 'Google authentication successful')
    } else {
      throw new Error(result.message || 'Authentication failed')
    }
  } catch (err) {
    throw new Error(err instanceof Error ? err.message : 'Server authentication failed')
  }
}

// 使用授权码进行认证
async function authenticateWithGoogleCode(code: string) {
  try {
    const redirectUri = `${window.location.origin}/auth/google/callback`
    const result = await trpc.auth.googleAuthCallback.mutate({
      code,
      redirectUri
    })

    if (result.success && result.data) {
      emit('success', result.data)
      props.onSuccess?.(result.data)
      toast.success(result.message || 'Google authentication successful')
    } else {
      throw new Error(result.message || 'Authentication failed')
    }
  } catch (err) {
    throw new Error(err instanceof Error ? err.message : 'Server authentication failed')
  }
}

// 初始化Google One Tap
async function initializeOneTap() {
  if (!props.useOneTap || !oneTapContainer.value) return

  try {
    await GoogleAuthUtils.initializeGoogleIdentity()
    
    if (window.google && oneTapContainer.value) {
      window.google.accounts.id.initialize({
        client_id: import.meta.env.VITE_GOOGLE_CLIENT_ID,
        callback: async (response: any) => {
          if (response.credential) {
            isLoading.value = true
            try {
              await authenticateWithGoogle(response.credential)
            } catch (err) {
              const errorMsg = err instanceof Error ? err.message : 'Authentication failed'
              error.value = errorMsg
              emit('error', errorMsg)
              props.onError?.(errorMsg)
              toast.error(errorMsg)
            } finally {
              isLoading.value = false
            }
          }
        },
        auto_select: false,
        cancel_on_tap_outside: true
      })

      // 渲染Google登录按钮
      window.google.accounts.id.renderButton(oneTapContainer.value, {
        theme: 'outline',
        size: 'large',
        width: '100%'
      })
    }
  } catch (err) {
    console.error('Failed to initialize Google One Tap:', err)
  }
}

// 处理URL中的授权码（用于重定向流程）
function handleAuthCallback() {
  const code = GoogleAuthUtils.extractCodeFromUrl()
  const error = GoogleAuthUtils.extractErrorFromUrl()

  if (error) {
    const errorMsg = `Google OAuth error: ${error}`
    emit('error', errorMsg)
    props.onError?.(errorMsg)
    toast.error(errorMsg)
    GoogleAuthUtils.cleanupUrl()
    return
  }

  if (code) {
    isLoading.value = true
    authenticateWithGoogleCode(code)
      .then(() => {
        GoogleAuthUtils.cleanupUrl()
      })
      .catch((err) => {
        const errorMsg = err instanceof Error ? err.message : 'Authentication failed'
        error.value = errorMsg
        emit('error', errorMsg)
        props.onError?.(errorMsg)
        toast.error(errorMsg)
        GoogleAuthUtils.cleanupUrl()
      })
      .finally(() => {
        isLoading.value = false
      })
  }
}

// 组件挂载
onMounted(() => {
  // 检查是否是从Google OAuth回调返回
  if (window.location.search.includes('code=') || window.location.search.includes('error=')) {
    handleAuthCallback()
  }

  // 初始化One Tap（如果启用）
  if (props.useOneTap) {
    initializeOneTap()
  }
})

// 组件卸载
onUnmounted(() => {
  // 清理Google Identity Services
  if (window.google) {
    try {
      window.google.accounts.id.cancel()
    } catch (e) {
      // 忽略清理错误
    }
  }
})
</script>

<style scoped>
.google-login-container {
  width: 100%;
}

.google-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  background-color: #fff;
  color: #3c4043;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.google-login-btn:hover:not(:disabled) {
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.30), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.google-login-btn:focus {
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.30), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.google-login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.google-icon {
  margin-right: 12px;
  display: flex;
  align-items: center;
}

.google-text {
  white-space: nowrap;
}

.google-one-tap-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.error-message {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  color: #dc2626;
  font-size: 14px;
}
</style>
